<template>
  <div class="container_hori content">
    <div class="left">
      <Box :show-header="false" class="left_table">
        <SortTable :columns="table.header" :data="table.data" :row-click="false" />
      </Box>
    </div>
    <div class="right container_vert_divide3">
      <Box title="决策区域分布">
        <PieChart :data="areaStats.data" :serie-name="areaStats.name" />
      </Box>
      <Box title="决策类别统计">
        <MultiBarChart :data="typeStats.data" :legend="typeStats.legend" :color-array="typeStats.colorArray"/>
      </Box>
      <Box title="执行结果统计">
        <MultiBarChart :data="resultStats.data" :legend="resultStats.legend" :color-array="resultStats.colorArray" :bar-width="resultStats.barWidth" />
      </Box>
    </div>
  </div>
</template>
<script setup>
import { ref, inject } from 'vue';
import Box from '@/components/Box.vue';
import PieChart from '@/components/PieChart.vue';
import SortTable from '@/components/SortTable.vue';
import MultiBarChart from '@/components/MultiBarChart.vue';
import { getYesterdayDateStr } from '@/utils/util';
import { history, area, type, result } from '@/api/decision';
//事件总线
const EventBus = inject('EventBus');
//默认请求日期昨日
let yesterdayStr = getYesterdayDateStr();
//请求时间参数
const queryTime = ref({
  startTime: yesterdayStr + ' 00:00:00',
  endTime: yesterdayStr + ' 23:59:59'
});
//监听请求时间变化
EventBus.on('timequery', ({ startTime, endTime }) => {
  queryTime.value.startTime = startTime;
  queryTime.value.endTime = endTime;
  getTableData();
  getChartData();
});
//历史详情表格
const table = ref({
  data: [],
  header: [
    {
      title: '时间',
      dataIndex: 'createTime'
    },
    {
      title: '地点',
      dataIndex: 'address',
      align: 'center'
    },
    {
      title: '车辆ID',
      dataIndex: 'carId',
      align: 'center'
    },
    {
      title: '决策类别',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '执行结果',
      dataIndex: 'result',
      align: 'center'
    }
  ]
});
//决策区域分布
const areaStats = ref({
  data: [],
  name: '决策区域分布'
});
//决策类别统计
const typeStats = ref({
  data: [],
  legend: ['换道', '加速', '减速'],
  colorArray: undefined
});
//执行结果统计
const resultStats = ref({
  data: [],
  barWidth: 12,
  legend: ['执行', '未执行', '脱离', '未脱离'],
  colorArray: undefined
});
/**获取表格数据 */
const getTableData = () => {
  history(queryTime.value).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      table.value.data = data;
    }
  });
};
/**获取图表数据 */
const getChartData = () => {
  const reqestData = queryTime.value;
  area(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      areaStats.value.data = data.map(({ area, value }) => {
        return {
          name: area,
          value
        };
      });
    }
  });
  type(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      let legend = [];
      let _data = [];
      data.forEach(({ area, type, value }) => {
        let index = legend.indexOf(type);
        if (index < 0) {
          legend.push(type);
          index = legend.length - 1;
        }
        let arr = _data[index];
        if (!arr) {
          arr = [];
          _data[index] = arr;
        }
        arr.push({ name: area, value });
      });
      typeStats.value.data = _data;
      typeStats.value.legend = legend;
    }
  });
  result(reqestData).then(({ retCode, retMessage, data }) => {
    if (retCode === '0000_0') {
      let legend = [];
      let _data = [];
      data.forEach(({ area, type, value }) => {
        let index = legend.indexOf(type);
        if (index < 0) {
          legend.push(type);
          index = legend.length - 1;
        }
        let arr = _data[index];
        if (!arr) {
          arr = [];
          _data[index] = arr;
        }
        arr.push({ name: area, value });
      });
      resultStats.value.data = _data;
      resultStats.value.legend = legend;
    }
  });
};

getTableData();
getChartData();
</script>
<style lang="less" scoped>
.left {
  width: 75.7%;
  height: 100%;
}
.left > div {
  width: 100%;
  height: 100%;
}

.left_table {
  padding: 1.25rem 1.75rem;
}

.right {
  width: 24.5%;
  height: 100%;
}
</style>
